<template>
  <div>
    <el-dialog
      title="密码修改"
      v-model="dialogVisible"
      width="500px"
      @close="closeDialog"
    >
      <el-form
        label-position="left"
        label-width="100px"
        ref="wordRef"
        :rules="wordRules"
        :model="wordForm"
      >
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            type="password"
            show-password
            v-model="wordForm.oldPassword"
            placeholder="请填写原密码"
            :maxlength="20"
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            show-password
            v-model="wordForm.newPassword"
            placeholder="请填写新密码"
            :maxlength="20"
          />
        </el-form-item>
        <el-form-item label="重复密码" prop="newPassword2">
          <el-input
            type="password"
            show-password
            v-model="wordForm.newPassword2"
            placeholder="请重复新密码"
            :maxlength="20"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit(wordRef)"> 确 定 </el-button>
          <el-button @click="closeDialog"> 取 消 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance } from 'element-plus';
import { updatePwd } from "@/api/loginApi";
import { encrypt } from '@/utils/jsencrypt'

const props = defineProps({
  // 是否显示
  show: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:show"]);
const dialogVisible = computed(() => props.show); // 控制弹窗显示

const wordRef = ref();
const wordForm = ref({
  oldPassword: "", // 原密码
  newPassword: "", // 新密码
  newPassword2: "", // 重复密码
});

const validatePass1 = (rule: any, value: string, callback: any) => {
  if (wordForm.value.oldPassword == wordForm.value.newPassword) {
    callback(new Error("新密码不能与原密码相同"));
  } else {
    callback();
  }
};
const validatePass2 = (rule: any, value: string, callback: any) => {
  if (value != wordForm.value.newPassword) {
    callback(new Error("两次输入密码不一致"));
  } else {
    callback();
  }
};

const wordRules = ref({
  // 验证规则
  oldPassword: [{ required: true, message: "请填写原密码", trigger: "change" }],
  newPassword: [
    { required: true, message: "请填写新密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
    { validator: validatePass1, trigger: "blur" },
  ],
  newPassword2: [
    { required: true, message: "请重复新密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
    { validator: validatePass2, trigger: "blur" },
  ],
});

// 关闭弹窗
const closeDialog = () => {
  resetForm();
  emits("update:show", false);
};

// 提交申请开票
const handleSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm("确认修改密码吗?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = new FormData();
          data.append("oldPassword", encrypt(wordForm.value.oldPassword));
          data.append("newPassword", encrypt(wordForm.value.newPassword));
          updatePwd(data).then(() => {
            ElMessage.success("修改成功");
            closeDialog();
          });
        })
        .catch(() => {});
    }
  });
};

// 重置表单
const resetForm = () => {
  wordForm.value = {
    oldPassword: "", // 原密码
    newPassword: "", // 新密码
    newPassword2: "", // 重复密码
  };
};
</script>
<style lang="less" scoped>
.query {
  width: 100%;
  height: 50px;
  margin: 20px 0;
  display: flex;
}
.page-footer {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}
</style>
<style>
.title-style {
  height: 60px;
  background-color: #f6faff !important;
}
</style>
